<script setup lang="ts">
import { wxAppGetwxUserAdrByIdData, type addressInfo, wxAppAddwxUserAdrData } from '@/services/user';
import { ref } from 'vue'

// 表单数据
// const form = ref({
//   receiver: '', // 收货人
//   contact: '', // 联系方式
//   fullLocation: '', // 省市区(前端展示)
//   provinceCode: '', // 省份编码(后端参数)
//   cityCode: '', // 城市编码(后端参数)
//   countyCode: '', // 区/县编码(后端参数)
//   address: '', // 详细地址
//   isDefault: 0, // 默认地址，1为是，0为否
// })

const query = defineProps<{
  id?: string
}>()
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新增地址' })
import type { UniFormsRules } from '@uni-helper/uni-ui-types';
import { onLoad } from '@dcloudio/uni-app'
const form = ref<addressInfo>({} as addressInfo)
const formRule: UniHelper.UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入正确格式的收货人姓名' },
    {
      maxLength: 8,
      errorMessage: '长度在最多8个字符',
    }]
  },
  phone: {
    rules: [{ required: true, errorMessage: '请输入手机号' },
    {
      pattern: /^1[3456789]\d{9}$/,
      errorMessage: '手机号格式不正确',
    }]
  },
  detailAddress: {
    rules: [{ required: true, errorMessage: '请输入详细地址' },
    {
      maxLength: 50,
      errorMessage: '长度在最多50个字符',
    }]
  },
  fullLocation: {
    rules: [{ required: true, errorMessage: '请输入地址' }]
  },
}
// import addressForm from './address-form.vue'
// type addressFormInstance = InstanceType<typeof addressForm>
// const formRef = ref<addressFormInstance>()
const formRef = ref<UniHelper.UniFormsInstance>()
const regionHandle: UniHelper.RegionPickerOnChange = (ev) => {
  form.value!.fullLocation = ev.detail.value.join(' ')
  const [provinceCode, cityCode, countyCode] = ev.detail.code!
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
const isDefaultHandle: UniHelper.SwitchOnChange = (ev) => {
  const isDefault = ev.detail.value
  form.value.isDefault = isDefault ? 1 : 0
}
const getAdrData = async(id:string) => {
  const res = await wxAppGetwxUserAdrByIdData(id)
  form.value = res.data
}



const submit = async() => {
  // console.log(form.value)
  try {
    await formRef.value?.validate?.()
    if(!form.value.isDefault){
      form.value.isDefault = 0
    }
    // console.log(form.value)
    const res = await wxAppAddwxUserAdrData(form.value)
    uni.showToast({
      title: res.data,
      icon: 'success',
      mask: true
    })
    uni.navigateBack()
  } catch (error) {
    uni.showToast({
      title: '請填写完整信息',
      icon: 'error',
      image: '',
      mask: false
    });
  }
}
onLoad( async() => {
  if(query.id){
    const res = await wxAppGetwxUserAdrByIdData(query.id)
    getAdrData(query.id)
  }else{
  }
})
</script>

<template>
  <view class="content">
    <uni-forms :model="form" ref="formRef" :rules="formRule">
      <!-- 表单内容 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input type="text" v-model="form!.receiver" placeholder="请输入年龄" />
      </uni-forms-item>

      <!-- <view class="form-item">
        <text class="label">收货人</text>
        <input class="input"  placeholder="请填写收货人姓名" v-model="form!.receiver" />
      </view> -->

      <uni-forms-item name="phone" class="form-item">
        <text class="label">手机号码</text>
        <input type="text" v-model="form!.phone" placeholder="请输入手机号码" />
      </uni-forms-item>

      <!-- <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form!.phone"  />
      </view> -->

      <uni-forms-item name="fullLocation" class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" @change="regionHandle" :value="form?.fullLocation?.split(' ')">
          <view v-if="form?.fullLocation">{{ form!.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>

      <!-- <view class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" value="">
          <view v-if="false">广东省 广州市 天河区</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view> -->

      <uni-forms-item name="detailAddress" class="form-item">
        <text class="label">详细地址</text>
        <input type="text" v-model="form!.detailAddress" placeholder="请输入详细地址" />
      </uni-forms-item>


      <!-- <view class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" value="" />
      </view> -->

      <uni-forms-item name="isDefault" class="form-item">
        <label class="label">设为默认地址</label>
        <switch @change="isDefaultHandle" class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
      </uni-forms-item>

      <!-- <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#27ba9b" :checked="true" />
      </view> -->

    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @click="submit">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
